<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>医院诊疗系统</title>
  <link rel="stylesheet" href="../css/layui.css">
  <script src="../layui.js"></script>
  <script src="../js/jquery-3.5.1.js"></script>

</head>
<body>
    <div class="layui-layout layui-layout-admin">
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <div class="layui-header">
          <div class="layui-logo layui-hide-xs layui-bg-black">医院诊疗系统</div>
          
          <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
              <i class="layui-icon layui-icon-spread-left"></i>
          </li>

              <li class="layui-nav-item layui-hide-xs layui-this"><a href="">费用管理</a></li>

          </ul>
    
    
    
        <!-- 右上角导航栏 -->
        <ul class="layui-nav layui-layout-right">
            
          <div class="layui-nav-item layui-hide layui-show-md-inline-block" style=" text-align: center; 
            display: inline-block; line-height: 42px; height: 42px; width: 25px; ">
            <div id="red-spot" style="position:absolute ;top: 1px; right: -7px; width: 4px; height: 4px; border: 0.5px solid red;
            background-color: red; border-radius: 50%;"></div>
            <i id="notice" class="layui-icon layui-icon-notice" style="font-size: 20px; color:rgba(255, 255, 255, .7);"></i>
            <!-- <span class="layui-badge-dot" style=" border: 0.5px; position: relative;top:-62px; right: -15px; "></span> -->
          </div>
          <li class="layui-nav-item layui-hide layui-show-md-inline-block">
            <a href="javascript:;">
              <img src="../image/gly.jpg" class="layui-nav-img">
              管理员
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">修改密码</a></dd>
              <dd><a id="edit">编辑信息</a></dd>
              <dd><a href="">退出登录</a></dd>
            </dl>
          </li>
          
        </ul>
        <!-- 右上角导航栏 -->
        
      </div>
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <div class="layui-side layui-bg-black">
          <div class="layui-side-scroll">
          
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
              <li class="layui-nav-item ">
                <a class="" href="medical_card.html">医疗卡管理</a>
                
              </li>
              <li class="layui-nav-item ">
                <a href="out_patient_charges.html" >门诊收费</a>
              </li>
              <li class="layui-nav-item ">
                <a href="return_premium.html">门诊退费</a>
              </li>
              <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;" class="layui-this">费用日结</a>
              </li>
            </ul>

    
          </div>
      </div>
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    
      <!-- 内容主体区域 -->
      <div class="layui-body" style="padding: 15px;">
        <!-- 面包屑 -->

        <div style=" padding: 15px;  background-color: #ffffff; border: solid #eeeeee 1px; box-shadow: inset 0 0 10px rgba(255, 255, 227, 0.925);">
          <fieldset class="layui-elem-field layui-field-title" style="margin: 0; border-top: none; padding: 0;height: 25px;line-height: 25px;">
            <span class="layui-breadcrumb" >
                <a href="/">费用管理</a>
                <a><cite>费用日结</cite></a>
            </span>
          </fieldset>
        </div>

        <!-- 面包屑 -->
        <blockquote class="layui-elem-quote" style="margin-top: 10px;">
          日结统计
        </blockquote>

        <!-- 日统计 -->
        <div style="margin: 5px 20px; ">
          <hr>
          <div style="padding: 5px;  background-color: #fafafa;">
              <div class="layui-row" style="text-align: center;">
                  
                  <div class="layui-col-xs4 layui-show-md-inline" style="padding: 5px;">
                      <span class="">日总收费</span>
                  </div>
                  <div class="layui-col-xs4 layui-show-md-inline" style="padding: 5px;">
                      <span class="">日总退费</span>
                  </div>
                  <div class="layui-col-xs4 layui-show-md-inline" style="padding: 5px;">
                      <span class="">日总收入</span>
                  </div>
                  
              </div>
          </div>
          <hr>
            <div style="padding: 5px;  background-color: #fdfdfd;">
                <div class="layui-row" style="text-align: center;">
                    <div class="layui-col-xs4 layui-show-md-inline" style="padding: 5px;">
                        <span id="Charge"></span>
                    </div>
                    <div class="layui-col-xs4 layui-show-md-inline" style="padding: 5px;">
                        <span id="Refund"></span>
                    </div>
                    <div class="layui-col-xs4 layui-show-md-inline" style="padding: 5px;">
                        <span id="Total"></span>
                    </div>
                </div>
            </div>
            <hr>




        </div>
          <!-- 日统计 -->

          <div class="demo">
              <div class="layui-inline">
                  <input class="layui-input" name="card" id="card" placeholder="医疗卡号" >
              </div>
              <button class="layui-btn" data-type="reload">搜索</button>
          </div>

          <!-- 表格头部 -->
          <table class="layui-hide" id="test" lay-filter="test"></table>

          <!-- 消息框 -->
          <div class="notice_win win" style="display: none;" >
              <div class="win_title">
                  <h6 style="display: inline-block; padding-left: 10px;">通知</h6>
                  <div style="display: inline-block; text-align: right; width: 200px;">
                      <span id="unread-count" style="text-align: right;color: #868686; font-size: 12px;">1</span>
                      <span style="text-align: right;color: #868686; font-size: 12px;">条未读通知</span>
                  </div>
              </div>
              <ul id="ul-read">
                  <div id="unread">
                      <div class="to-be-read">
                          <li class="win_item">
                              <div style="text-align: center; width: 40px; padding: 0; float: left;">
                                  <i class="layui-icon layui-icon-username layui-inline" style=" border-radius: 14px 14px 14px 14px ;
            height: 28px; line-height: 28px; width: 28px; background-color: #a0d9ff; color: rgb(0, 134, 196); font-size:20px ;"></i>

                              </div>
                              <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                                  <p style=" padding-bottom: 5px;">
                                      新用户注册
                                  </p>
                                  <span style=" color: #868686; font-size: 12px;" >
              10分钟前
            </span>
                              </div>
                          </li>
                          <hr style="margin: 0px;">
                      </div>
                  </div>


                  <span style=" color: #868686; font-size: 12px; padding-left: 20px; height: 20px;line-height: 20px;" >已读</span>
                  <hr style="margin: 0px;" >
                  <div class="have-read">
                      <li class="win_item">

                          <div style="text-align: center; width: 40px; padding: 0; float: left;">
                              <i class="layui-icon layui-icon-user layui-inline"
                                 style=" border-radius: 14px 14px 14px 14px ;
          height: 28px; line-height: 28px; width: 28px; background-color: #fcffa0; color: rgb(196, 176, 0); font-size:20px ;"></i>

                          </div>
                          <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                              <p style=" padding-bottom: 5px;">
                                  新病人预约
                              </p>
                              <span style=" color: #868686; font-size: 12px;">
            10分钟前
          </span>
                          </div>
                      </li>
                      <hr style="margin:0px">
                      <li class="win_item">
                          <div style="text-align: center; width: 40px; padding: 0; float: left;">
                              <i class="layui-icon layui-icon-user layui-inline"
                                 style=" border-radius: 14px 14px 14px 14px ;
          height: 28px; line-height: 28px; width: 28px; background-color: #fcffa0; color: rgb(196, 176, 0); font-size:20px ;"></i>

                          </div>
                          <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                              <p style=" padding-bottom: 5px;">
                                  新病人预约
                              </p>
                              <span style=" color: #868686; font-size: 12px;">
            10分钟前
          </span>
                          </div>

                      </li>
                      <hr style="margin:0px">
                      <li class="win_item">
                          <div style="text-align: center; width: 40px; padding: 0; float: left;">
                              <i class="layui-icon layui-icon-user layui-inline"
                                 style=" border-radius: 14px 14px 14px 14px ;
          height: 28px; line-height: 28px; width: 28px; background-color: #fcffa0; color: rgb(196, 176, 0); font-size:20px ;"></i>

                          </div>
                          <div style="display: inline-block; height: 40;margin: 0;padding-left: 20px; width: 200px;">
                              <p style=" padding-bottom: 5px;">
                                  新病人预约
                              </p>
                              <span style=" color: #868686; font-size: 12px;">
            10分钟前
          </span>
                          </div>
                      </li>
                      <hr style="margin:0px">
                  </div>

              </ul>
          </div>
          <!-- 消息框 -->
          <!-- 消息样式 -->
          <style>

              .win{
                  padding: 0;
                  margin: 0;
              }
              .notice_win{
                  width: 300px;
                  height: 404px;
                  background-color: rgb(253, 255, 249);
                  float: none;
                  position: fixed;
                  top: 61px;
                  right: 150px;
                  z-index: 999;
                  border-radius: 8px;
              }
              .win_line{
                  width: 300;
                  height: 17;
              }
              .win_item{
                  border: 1px;
                  padding: 12px;
                  width: 274px;
                  height: 40px;
              }
              img{
                  width: 100%;
              }
              .win_title{
                  width: 252;
                  padding: 24px;
                  background-image: url("../image/image2.png");
                  background-size:200% 200%;
                  border-radius: 8px 8px 0 0px;
                  height: 17px;
                  line-height: 17px;
              }
          </style>
          <!-- 消息样式 -->

      </div>

        <!-- 主体 -->

    </div>

    <!-- 消息处理 -->
    <script>
        $("#notice").on('click',function(){
            $(".notice_win").css('display',"block");
        });
        $("body").click(function(e){
            if((!$(e.target).closest("#notice").length)&&(!$(e.target).closest(".notice_win").length)){
                $(".notice_win").css('display',"none");
            }
        });

        var count = $(".to-be-read").length;
        var flag=count;
        for(var i=0;i<count;i++){
            $("#unread>.to-be-read").eq(i).click(function(e){
                $(".have-read").prepend($("#unread .to-be-read").eq(i-1));
                flag--;
                $("#unread-count").text(flag);
                if(flag==0){
                    $("#red-spot").css('display',"none");
                }
            });

        }


    </script>

    <!-- 消息处理 -->



    <!-- // 表格处理 -->





    <script>
        var a;
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test',
                url:'/charge/selectDaily',   //数据来源接口
                id: 'allDailyTable'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,totalRow: true
                ,title: '用户数据表'
                ,cols: [
                    [  //表头
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'br_card', title: '诊疗卡号', width:130, fixed: 'left', align:'center',unresize: true, sort: true, totalRowText: '合计'}
                        ,{field: 'yh_name', title: '姓名', width:80,align:'center' }
                        ,{field: 'br_age', title: '年龄', width:80,align:'center' }
                        ,{field: 'yh_phone', title: '手机', width:80,align:'center' }
                        ,{field: 'bl_diag', title: '诊断', width: 170, align:'center'}
                        ,{field: 'charge', title: '收费', width:80, align:'center',totalRow: true}
                        ,{field: 'refund', title: '退费', width: 120, align:'center',totalRow: true }
                    ]
                ]
                ,page: true
                ,parseData: function (res) {
                    return {
                        'code': 0,
                        'msg': '',
                        'count': res.length,
                        'data': res
                    }
                }
                ,done:function (res,curr,count){
                    var Charge=0;
                    var Refund=0;
                    var Total=0;
                    for (var i = 0; i < res.data.length; i++) {
                        console.log(res.data[i])
                        Charge += parseFloat(res.data[i]['charge']);
                        Refund += parseFloat(res.data[i]['refund']);
                        Total += parseFloat(res.data[i]['charge']) - parseFloat(res.data[i]['refund']);
                    }
                    $("#Charge").text(Charge);
                    $("#Refund").text(Refund);
                    $("#Total").text(Total);
                }
            });
            var $ = layui.$, active = {
                reload:function (){
                    var card = $('#card');
                    var index = layer.msg('查询中，请稍候...',{icon:16,time:false,shade:0});
                    setTimeout(function (){
                        table.reload('allDailyTable',{
                            page:{
                                curr:1
                            }
                            ,where:{
                                card:card.val()
                            }
                        });
                        layer.close(index);
                    },800);
                }
            };
            $('.demo .layui-btn').on('click',function (){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });


        });

    </script>


    <!-- // 表格处理 -->






    <!-- 修改信息事件 -->
    <script>
        $("#edit").on('click',function(e){
            //打开窗口
            layer.open({
                type: 2,
                area: ['1000px', '600px'],
                fixed: false, //不固定
                maxmin: true,
                title:"个人信息",
                content: 'edit_information.html'
                // 3.父传子值
                //  success:function(layero, index){
                //       //关键在这，调用子的iframe的方法，进行传参,前两行固定写法
                //       var body = layer.getChildFrame('body', index);
                //       var iframeWin = window[layero.find('iframe')[0]['name']];
                //       var div=$(obj).text();
                //       iframeWin.childIframe(div);    //看这
                //   }
            });
        });

    </script>


</body>
</html>